import React, { useRef, useState, useEffect, useCallback } from 'react'
import { Row, Radio, Col, TimePicker } from "antd";
import dayjs from 'dayjs'
import moment from 'moment'
const WEEK_DAY_LIST = [{
    key: 1,
    name: "周一",
}, {
    key: 2,
    name: "周二",
}, {
    key: 3,
    name: "周三",
}, {
    key: 4,
    name: "周四",
}, {
    key: 5,
    name: "周五",
}, {
    key: 6,
    name: "周六",
}, {
    key: 7,
    name: "周日",
}]
const MONTH_DAY_LIST = [{
    key: 1,
    name: 1,
}, {
    key: 2,
    name: 2,
}, {
    key: 3,
    name: 3,
}, {
    key: 4,
    name: 4,
}, {
    key: 5,
    name: 5,
}, {
    key: 6,
    name: 6,
}, {
    key: 7,
    name: 7,
}, {
    key: 8,
    name: 8,
}, {
    key: 9,
    name: 9,
}, {
    key: 10,
    name: 10,
}, {
    key: 11,
    name: 11,
}, {
    key: 12,
    name: 12,
}, {
    key: 13,
    name: 13,
}, {
    key: 14,
    name: 14,
}, {
    key: 15,
    name: 15,
}, {
    key: 16,
    name: 16,
}, {
    key: 17,
    name: 17,
}, {
    key: 18,
    name: 18,
}, {
    key: 19,
    name: 19,
}, {
    key: 20,
    name: 20,
}, {
    key: 21,
    name: 21,
}, {
    key: 22,
    name: 22,
}, {
    key: 23,
    name: 23,
}, {
    key: 24,
    name: 24,
}, {
    key: 25,
    name: 25,
}, {
    key: 26,
    name: 26,
}, {
    key: 27,
    name: 27,
}, {
    key: 28,
    name: 28,
}, {
    key: 29,
    name: 29,
}, {
    key: 30,
    name: 30,
}, {
    key: 31,
    name: 31,
}]
const RepeatDate = props => {
    const { value, onChange } = props
    const initType = value?.type
    let initTimes = []
    if(value && value.times && value.times.length){
        initTimes = [moment(value.times[0].begin_at, "HH:mm"),moment(value.times[0].end_at, "HH:mm")]
    }
    const initWeeks = value?.weekdays ||  []
    const initMonths = value?.monthdays || []
    const [type, setType] = useState(initType)
    const [times, setTimes] = useState(initTimes)
    const [weekSelected, setWeekSelected] = useState(initWeeks)
    const [monthDaysSelected, setMonthDaysSelected] = useState(initMonths)

    const typeChange = (e => {
        setType(e.target.value)
        onChange({
            ...value,
            type: e.target.value
        })
    })

    const handleWeekClick = (key) => {
        const index = weekSelected.indexOf(key)
        let _weekSelected = []
        if (index >= 0) {
            _weekSelected = [
                ...weekSelected.slice(0, index),
                ...weekSelected.slice(index + 1)
            ]
        } else {
            _weekSelected = [...weekSelected, key]
        }
        setWeekSelected(_weekSelected)
        onChange({
            ...value,
            weekdays: _weekSelected
        })
    }

    const handleDaysClick = (key) => {
        const index = monthDaysSelected.indexOf(key)
        let _monthDaysSelected = []
        if (index >= 0) {
            _monthDaysSelected = [
                ...monthDaysSelected.slice(0, index),
                ...monthDaysSelected.slice(index + 1)
            ]
        } else {
            _monthDaysSelected = [...monthDaysSelected, key]
        }
        setMonthDaysSelected(_monthDaysSelected)
        onChange({
            ...value,
            monthdays: _monthDaysSelected
        })
    }

    const changeTimes = (times) => {
        onChange({
            ...value,
            begin_at: dayjs(times[0]).format('HH:mm'),
            end_at: dayjs(times[1]).format('HH:mm')
        })
        setTimes(times)
    }

    return (
        <div className='repeat-date-setting'>
            <Row className="modal-line">
                <Col span={24}>
                    <Radio.Group onChange={typeChange} value={type}>
                        <Radio value='days'>每天重复</Radio>
                        <Radio value='weeks'>每周重复</Radio>
                        <Radio value='months'>每月重复</Radio>
                    </Radio.Group>
                </Col>
            </Row>
            {type === 'days' &&
                <Row className="modal-line">
                    <TimePicker.RangePicker value={times} format="HH:mm" onChange={changeTimes} />
                </Row>}
            {type === 'weeks' && <Row className="modal-line product-available-dates-center">
                {WEEK_DAY_LIST.map(week => (
                    <div className={`week-checkbox${weekSelected.indexOf(week.key) >= 0 ? ' selected' : ''}`}
                        onClick={handleWeekClick.bind(this, week.key)}
                        key={week.key}
                    >
                        {week.name}
                    </div>
                ))}
                <TimePicker.RangePicker value={times} format="HH:mm" onChange={changeTimes} />
            </Row>}
            {type === 'months' && <Row className="modal-line product-available-dates-center">
                {MONTH_DAY_LIST.map(days => (
                    <div className={`days-checkbox${monthDaysSelected.indexOf(days.key) >= 0 ? ' selected' : ''}`}
                        onClick={handleDaysClick.bind(this,days.key)}
                        key={days.key}
                    >
                        {days.name}
                    </div>
                ))}
                <TimePicker.RangePicker value={times} format="HH:mm" onChange={changeTimes} />
            </Row>}

        </div>
    )
}

export default RepeatDate